<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 
    - primary meta tags
  -->
  <title>关于我们 - 610的书窝</title>
  <meta name="title" content="关于我们 - 610的书窝">
  <meta name="description" content="了解610书窝的故事、团队成员和我们的使命">

  <!-- 
    - favicon
  -->
  <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">

  <!-- 
    - custom css link
  -->
  <link rel="stylesheet" href="./assets/css/style.css">

  <!-- 
    - Font Awesome CDN Link (Added)
  -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
    integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

  <!-- 
    - google font link
  -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&family=Work+Sans:wght@400;500;700&display=swap"
    rel="stylesheet">

  <style>
    /* 关于我们页面专用样式 */
    .team-card {
      background-color: var(--white-1);
      border-radius: 15px;
      padding: 25px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
      text-align: center;
      transition: transform 0.3s ease;
      border: 2px solid var(--primary-pink);
      display: flex;
      flex-direction: column;
      height: 100%;
      /* 确保所有卡片高度一致 */
    }

    .team-card:hover {
      transform: translateY(-10px);
    }

    .team-avatar {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      margin: 0 auto 20px;
      overflow: hidden;
      border: 3px solid var(--secondary-pink);
    }

    .team-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .team-name {
      color: var(--dark-pink-text);
      font-size: var(--fs-4);
      margin-bottom: 5px;
    }

    .team-role {
      color: var(--secondary-pink);
      font-size: var(--fs-6);
      margin-bottom: 15px;
    }

    .team-desc {
      color: var(--medium-gray);
      margin-bottom: 20px;
      line-height: 1.6;
      flex-grow: 1;
      /* 让描述部分可以伸展，保持卡片底部对齐 */
    }

    .team-card .social-list {
      margin-top: auto;
      /* 将社交图标推到底部 */
      justify-content: center;
      display: flex;
      /* 确保社交图标水平排列 */
      padding-top: 10px;
      /* 为社交图标增加上方间距 */
    }

    .milestone-container {
      margin-top: 50px;
      position: relative;
      max-width: 800px;
      /* 控制整体宽度，使内容居中 */
      margin-left: auto;
      margin-right: auto;
    }

    .milestone-line {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 4px;
      background-color: var(--primary-pink);
      transform: translateX(-50%);
    }

    .milestone-item {
      position: relative;
      margin-bottom: 25px;
      /* 减少节点间距，从50px减少到25px */
      display: flex;
      align-items: center;
    }

    .milestone-item:nth-child(odd) {
      justify-content: flex-start;
      padding-right: 50%;
      padding-left: 0;
    }

    .milestone-item:nth-child(even) {
      justify-content: flex-end;
      padding-left: 50%;
      padding-right: 0;
    }

    .milestone-dot {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 16px;
      /* 减小点的大小，从20px减到16px */
      height: 16px;
      background-color: var(--secondary-pink);
      border-radius: 50%;
      z-index: 1;
    }

    .milestone-content {
      background-color: var(--white-1);
      padding: 15px;
      /* 减少内边距，从20px减到15px */
      border-radius: 10px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
      max-width: 90%;
      /* 增加内容宽度，从80%增加到90% */
      border: 1px solid var(--primary-pink);
      margin-left: 15px;
      /* 减少与中线的距离 */
      margin-right: 15px;
    }

    /* 确保时间线内容与中心线有适当的距离 */
    .milestone-item:nth-child(odd) .milestone-content {
      margin-right: 15px;
      margin-left: 0;
    }

    .milestone-item:nth-child(even) .milestone-content {
      margin-left: 15px;
      margin-right: 0;
    }

    .milestone-date {
      font-weight: bold;
      color: var(--secondary-pink);
      margin-bottom: 10px;
    }

    .milestone-text {
      color: var(--dark-pink-text);
    }

    .value-card {
      background-color: var(--soft-pink-bg);
      border-radius: 10px;
      padding: 30px;
      margin-bottom: 30px;
      text-align: center;
      border-bottom: 3px solid var(--secondary-pink);
    }

    .value-icon {
      font-size: 40px;
      color: var(--secondary-pink);
      margin-bottom: 15px;
    }

    .value-title {
      font-size: var(--fs-4);
      color: var(--dark-pink-text);
      margin-bottom: 15px;
    }
  </style>
</head>

<body id="top">

  <!-- 
    - #HEADER
  -->
  <header class="header" data-header>
    <div class="header-top">
      <div class="container">

        <a href="index.html" class="logo">
          <img src="./assets/images/logo.svg" width="138" height="28" alt="booken home">
        </a>

        <div class="input-wrapper">
          <input type="search" name="search" placeholder="搜索我们的网站" class="input-field">

          <button class="btn btn-primary">搜索</button>
        </div>

        <div class="header-action">

          <a href="./cart.html" class="header-action-btn" aria-label="cart" title="购物车">
            <span class="span">3</span>
            <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
          </a>

          <button class="nav-open-btn" aria-label="open menu" title="打开菜单" data-nav-toggler>
            <ion-icon name="menu-outline" aria-hidden="true"></ion-icon>
          </button>

          <a href="./login.html" class="header-action-btn" aria-label="user" title="登录/注册">
            <ion-icon name="person-outline" aria-hidden="true"></ion-icon>
          </a>

        </div>

      </div>
    </div>

    <div class="header-bottom" data-navbar>
      <div class="container">

        <nav class="navbar">

          <button class="nav-close-btn" data-nav-toggler aria-label="close menu" title="关闭菜单">
            <ion-icon name="close-outline" aria-hidden="true"></ion-icon>
          </button>

          <div class="navbar-top">
            <input type="search" name="search" placeholder="搜索我们的网站" class="input-field">

            <button class="search-btn" aria-label="Search">
              <ion-icon name="search-outline" aria-hidden="true"></ion-icon>
            </button>
          </div>

          <ul class="navbar-list">

            <li>
              <a href="index.html" class="navbar-link">首页</a>
            </li>

            <!-- 博客导航项 -->
            <li>
              <a href="blog.html" class="navbar-link navbar-link-cute blog-link">
                <span class="cute-icon">📚</span>
                博客
                <span class="cute-bubble">读好文~</span>
              </a>
            </li>

            <!-- 商店导航项 -->
            <li>
              <a href="shop.html" class="navbar-link navbar-link-cute shop-link">
                <span class="cute-icon">🛍️</span>
                商店
                <span class="cute-bubble">买买买~</span>
              </a>
            </li>

            <!-- 关于我们导航项 - 当前激活页面 -->
            <li>
              <a href="about.html" class="navbar-link navbar-link-cute about-link"
                style="background-color: var(--pastel-mint);">
                <span class="cute-icon">🏡</span>
                关于我们
                <span class="cute-bubble">认识我们~</span>
              </a>
            </li>

            <!-- 联系方式导航项 -->
            <li>
              <a href="contact.html" class="navbar-link navbar-link-cute contact-link">
                <span class="cute-icon">✉️</span>
                联系方式
                <span class="cute-bubble">找到我们~</span>
              </a>
            </li>

          </ul>

        </nav>

        <a href="tel:+15813316885" class="header-contact-link">
          <ion-icon name="headset-outline" aria-hidden="true"></ion-icon>

          <span class="span">(+86) 15813316885</span>
        </a>

      </div>
    </div>

    <div class="overlay" data-overlay data-nav-toggler></div>
  </header>

  <main>
    <article>

      <!-- 
        - #关于我们页面标题部分
      -->
      <section class="section hero has-bg-image" aria-label="about-hero"
        style="background-image: url('./assets/images/section-bg.jpg')">
        <div class="container">

          <div class="hero-content">

            <h1 class="h1 hero-title has-after">
              关于我们 <br>
              认识610书窝
            </h1>

            <p class="hero-text">
              我们是一群热爱阅读的舍友，希望通过610书窝与更多爱书之人分享阅读的乐趣～
            </p>

          </div>

        </div>
      </section>

      <!-- 
        - #我们的故事部分
      -->
      <section class="section">
        <div class="container">
          <h2 class="h2 section-title">我们的故事</h2>

          <p class="section-text">
            610书窝起源于我们宿舍的一个小小角落，几个书架和一堆书籍。我们是一群热爱阅读的舍友，平时喜欢分享读过的好书和阅读心得。
            随着收藏的书越来越多，我们决定将这个小角落扩展成一个温馨的"书窝"，不仅服务于宿舍内部，还希望能与更多爱书之人分享阅读的乐趣。
          </p>

          <!-- 发展历程时间线 -->
          <div class="milestone-container">
            <div class="milestone-line"></div>

            <div class="milestone-item">
              <div class="milestone-dot"></div>
              <div class="milestone-content">
                <div class="milestone-date">2023年9月</div>
                <div class="milestone-text">610宿舍成立读书小组，每周进行一次读书分享会</div>
              </div>
            </div>

            <div class="milestone-item">
              <div class="milestone-dot"></div>
              <div class="milestone-content">
                <div class="milestone-date">2023年11月</div>
                <div class="milestone-text">在宿舍角落设立了第一个小型书架，开始藏书</div>
              </div>
            </div>

            <div class="milestone-item">
              <div class="milestone-dot"></div>
              <div class="milestone-content">
                <div class="milestone-date">2024年1月</div>
                <div class="milestone-text">书籍数量突破100本，开始对外借阅服务</div>
              </div>
            </div>

            <div class="milestone-item">
              <div class="milestone-dot"></div>
              <div class="milestone-content">
                <div class="milestone-date">2024年3月</div>
                <div class="milestone-text">举办首次校园读书活动，吸引了50多名同学参与</div>
              </div>
            </div>

            <div class="milestone-item">
              <div class="milestone-dot"></div>
              <div class="milestone-content">
                <div class="milestone-date">2024年5月</div>
                <div class="milestone-text">开设线上平台，正式命名为"610书窝"</div>
              </div>
            </div>

            <div class="milestone-item">
              <div class="milestone-dot"></div>
              <div class="milestone-content">
                <div class="milestone-date">2025年1月</div>
                <div class="milestone-text">会员数突破500人，藏书量超过1000本</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 
        - #团队成员部分
      -->
      <section class="section">
        <div class="container">
          <h2 class="h2 section-title">我们的团队</h2>

          <p class="section-text">
            认识一下610书窝背后的小伙伴们～我们每个人都热爱阅读，并且在书窝中扮演着不同的角色
          </p>

          <ul class="grid-list" style="margin-top: 40px;">
            <!-- 团队成员1 -->
            <li>
              <div class="team-card">
                <div class="team-avatar">
                  <img src="./assets/images/blog-1.jpg" alt="杨佳宇" />
                </div>
                <h3 class="team-name">杨佳宇</h3>
                <p class="team-role">创始人 & 图书管理员</p>
                <p class="team-desc">23大数据管理与应用2班学生</p>
                <div class="social-list">
                  <a href="#" class="social-link" style="margin: 0 5px;">
                    <i class="fa-brands fa-qq"></i>
                  </a>
                  <a href="#" class="social-link" style="margin: 0 5px;">
                    <i class="fa-brands fa-weixin"></i>
                  </a>
                </div>
              </div>
            </li>

            <!-- 团队成员2 -->
            <li>
              <div class="team-card">
                <div class="team-avatar">
                  <img src="./assets/images/blog-2.jpg" alt="温尊皓" />
                </div>
                <h3 class="team-name">温尊皓</h3>
                <p class="team-role">活动策划 & 内容编辑</p>
                <p class="team-desc">23大数据管理与应用2班学生</p>
                <div class="social-list">
                  <a href="#" class="social-link" style="margin: 0 5px;">
                    <i class="fa-brands fa-qq"></i>
                  </a>
                  <a href="#" class="social-link" style="margin: 0 5px;">
                    <i class="fa-brands fa-weixin"></i>
                  </a>
                </div>
              </div>
            </li>

            <!-- 团队成员3 -->
            <li>
              <div class="team-card">
                <div class="team-avatar">
                  <img src="./assets/images/blog-3.jpg" alt="莫文劲" />
                </div>
                <h3 class="team-name">莫文劲</h3>
                <p class="team-role">技术支持 & 网站维护</p>
                <p class="team-desc">23大数据管理与应用2班学生</p>
                <div class="social-list">
                  <a href="#" class="social-link" style="margin: 0 5px;">
                    <i class="fa-brands fa-qq"></i>
                  </a>
                  <a href="#" class="social-link" style="margin: 0 5px;">
                    <i class="fa-brands fa-weixin"></i>
                  </a>
                </div>
              </div>
            </li>

            <!-- 团队成员4 -->
            <li>
              <div class="team-card">
                <div class="team-avatar">
                  <img src="./assets/images/blog-1.jpg" alt="刘皓" />
                </div>
                <h3 class="team-name">刘皓</h3>
                <p class="team-role">财务 & 采购</p>
                <p class="team-desc">23大数据管理与应用2班学生</p>
                <div class="social-list">
                  <a href="#" class="social-link" style="margin: 0 5px;">
                    <i class="fa-brands fa-qq"></i>
                  </a>
                  <a href="#" class="social-link" style="margin: 0 5px;">
                    <i class="fa-brands fa-weixin"></i>
                  </a>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </section>

      <!-- 
        - #我们的理念部分
      -->
      <section class="section" style="background-color: var(--white-2);">
        <div class="container">
          <h2 class="h2 section-title">我们的理念</h2>

          <p class="section-text">
            在610书窝，我们坚持以下核心价值观，指导我们的每一步发展
          </p>

          <div class="grid-list" style="margin-top: 40px;">
            <!-- 理念卡片1 -->
            <div class="value-card">
              <div class="value-icon">📖</div>
              <h3 class="value-title">阅读无界</h3>
              <p>我们相信阅读不应有边界，无论是文学类型、文化背景还是阅读方式。610书窝致力于提供多元化的阅读资源，让每个人都能找到自己喜爱的内容。</p>
            </div>

            <!-- 理念卡片2 -->
            <div class="value-card">
              <div class="value-icon">🤝</div>
              <h3 class="value-title">分享共赢</h3>
              <p>书是用来分享的。通过交换图书、分享心得，我们创造了一个互惠互利的阅读社区，让知识在交流中传播，让思想在碰撞中升华。</p>
            </div>

            <!-- 理念卡片3 -->
            <div class="value-card">
              <div class="value-icon">🌱</div>
              <h3 class="value-title">持续成长</h3>
              <p>我们鼓励每个人通过阅读不断成长和进步。610书窝也在不断学习和完善，希望能为更多爱书人提供更好的服务和体验。</p>
            </div>

            <!-- 理念卡片4 -->
            <div class="value-card">
              <div class="value-icon">❤️</div>
              <h3 class="value-title">温暖陪伴</h3>
              <p>阅读是一种陪伴。在610书窝，我们希望通过图书为每一位读者提供心灵的慰藉和温暖，成为你生活中的一方宁静港湾。</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 
        - #加入我们部分
      -->
      <section class="section offer has-bg-image" aria-label="join-us"
        style="background-image: url('./assets/images/section-bg.jpg')">
        <div class="container">

          <p class="section-subtitle">与我们同行</p>

          <h2 class="h2 section-title">加入610书窝大家庭</h2>

          <p class="section-text">
            无论你是热爱阅读的书友，还是希望参与志愿服务的同学，我们都欢迎你的加入！
            成为610书窝的一员，你可以享受更多阅读福利，参与丰富的读书活动，结识志同道合的朋友。
          </p>

          <a href="contact.html" class="btn">立即加入</a>

        </div>
      </section>

    </article>
  </main>

  <!-- 
    - #FOOTER
  -->
  <footer class="footer has-bg-image" style="background-image: url('./assets/images/section-bg.jpg')">

    <div class="footer-top section">
      <div class="container grid-list">

        <div class="footer-brand">

          <a href="#" class="logo">
            <img src="./assets/images/logo.svg" width="138" height="28" alt="610书窝 Logo">
          </a>

          <p class="footer-text">
            欢迎来到610书窝！你的专属宿舍阅读角~ 📚✨
          </p>

          <ul class="social-list">
            <li>
              <a href="#" class="social-link" title="QQ">
                <i class="fa-brands fa-qq"></i>
              </a>
            </li>
            <li>
              <a href="#" class="social-link" title="微信">
                <i class="fa-brands fa-weixin"></i>
              </a>
            </li>
            <li>
              <a href="#" class="social-link" title="微博">
                <i class="fa-brands fa-weibo"></i>
              </a>
            </li>
          </ul>

        </div>

        <ul class="footer-list">

          <li>
            <p class="footer-list-title">关于书窝</p>
          </li>

          <li>
            <a href="#" class="footer-link">书窝故事</a>
          </li>

          <li>
            <a href="./members.html" class="footer-link">成员介绍</a>
          </li>

          <li>
            <a href="#" class="footer-link">加入我们?</a>
          </li>

          <li>
            <a href="#" class="footer-link">书友Q&A</a>
          </li>

          <li>
            <a href="#" class="footer-link">好书推荐</a>
          </li>

        </ul>

        <ul class="footer-list">

          <li>
            <p class="footer-list-title">书友指南</p>
          </li>

          <li>
            <a href="#" class="footer-link">借阅规则</a>
          </li>

          <li>
            <a href="#" class="footer-link">图书分类</a>
          </li>

          <li>
            <a href="#" class="footer-link">荐购通道</a>
          </li>

          <li>
            <a href="#" class="footer-link">书单分享</a>
          </li>

          <li>
            <a href="#" class="footer-link">活动日历</a>
          </li>

        </ul>

        <ul class="footer-list">

          <li>
            <p class="footer-list-title">特色活动</p>
          </li>

          <li>
            <a href="#" class="footer-link">读书分享会</a>
          </li>

          <li>
            <a href="#" class="footer-link">主题书展</a>
          </li>

          <li>
            <a href="#" class="footer-link">好物交换</a>
          </li>

          <li>
            <a href="#" class="footer-link">考试周加油站</a>
          </li>

          <li>
            <a href="#" class="footer-link">留言板</a>
          </li>

        </ul>

      </div>
    </div>

    <div class="footer-bottom">
      <div class="container">

        <p class="copyright">
          © 2025 610书窝 | 由舍友们用心维护~ ❤️
        </p>

      </div>
    </div>

  </footer>

  <!-- 
    - #BACK TO TOP
  -->
  <a href="#top" class="back-top-btn" aria-label="返回顶部" data-back-top-btn>
    <ion-icon name="chevron-up" aria-hidden="true"></ion-icon>
  </a>

  <!-- 
    - custom js link
  -->
  <script src="./assets/js/script.js" defer></script>

  <!-- 
    - ionicon link
  -->
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

</body>

</html>